<template>
  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">内容管理</section>

      <a-row :gutter="16">
        <!-- <a-col :span="5">
          <span class="label">分类名称：</span>
          <a-input :max-length="100" allow-clear v-model="orderId" placeholder="请输入" />
        </a-col> -->
        <a-col :span="8">
   <!--       <a-button class="ml-18" type="primary" @click="search">查询</a-button>
          <a-button class="mx-8" @click="reset">重置</a-button> -->
          <a-button @click="getEdit" class="mx-8" type="primary">新增</a-button>
        </a-col>
      </a-row>
      <a-table class="mt-16 order-table" :columns="columns" :data-source="data" :scroll="scroll" :pagination="pagination">
        <template #status="status, data">
          {{ data.status == 1 ? '成功' : '失败' }}
        </template>
        <template #firstBehaviorStatus="firstBehaviorStatus, data">
          {{statusLists[data.firstBehaviorStatus]}}
        </template>
        <template #secondBehaviorStatus="secondBehaviorStatus, data">
          {{statusLists[data.secondBehaviorStatus]}}
        </template>
        <template #thirdBehaviorStatus="thirdBehaviorStatus, data">
          {{statusLists[data.thirdBehaviorStatus]}}
        </template>
        <template #fourthBehaviorStatus="fourthBehaviorStatus, data">
          {{statusLists[data.fourthBehaviorStatus]}}
        </template>
        <template #fifthBehaviorStatus="fifthBehaviorStatus, data">
          {{statusLists[data.fifthBehaviorStatus]}}
        </template>
        <template #action="action, data">
          <div class="flex items-center justify-between">
            <a-button @click="getEdit(data)" class="mr-10" type="primary">
              编辑
            </a-button>
            <a-button @click="delect(data)" class="ml-10 mr-10" type="danger">
              删除
            </a-button>

          </div>
        </template>

      </a-table>
      <!-- <a-divider  /> -->
    </a-card>
    <particulars ref="particulars"></particulars>
    <create @upload="upload" ref="create"></create>
  </a-spin>
</template>
<script>
import { behaviorList,behaviorDel } from '@/api'
import particulars from './components/particulars'
import create from './components/create'
import {
  deductionDetail
} from '@/api/newPet'
import { tableMixins } from '@/utils/mixins'
export default {
  mixins: [tableMixins],
  components: {
    particulars,create
  },
  data() {
    return {
      loading: false,
      tabs: 'select1',
      orderId: undefined,
      createTime: [undefined, undefined],
      status: 1,
      statusLists:['能做','不能做','慎做'],
      orderStatusEnums: [
        { value: 1, name: '成功' },
        { value: 2, name: '失败' }
      ],
      data: [
        { id: 1111, travellerName: '武松', status: 1 }
      ],
      columns: [
        { title: '一级分类', dataIndex: 'firstBehaviorCategoryName', align: 'center', width: 140, scopedSlots: { customRender: 'firstBehaviorCategoryName' } },
        // {
        //   title: '二级分类',
        //   dataIndex: 'secondBehaviorCategoryName',
        //   width: 120,
        //   align: 'center',
        //   scopedSlots: { customRender: 'secondBehaviorCategoryName' },
        // },
        { title: '新到家', dataIndex: 'firstBehaviorStatus', align: 'center', width: 70, scopedSlots: { customRender: 'firstBehaviorStatus' } },
        { title: '发情期', dataIndex: 'secondBehaviorStatus', align: 'center', width: 70, scopedSlots: { customRender: 'secondBehaviorStatus' } },
        { title: '幼猫期', dataIndex: 'thirdBehaviorStatus', align: 'center', width: 70, scopedSlots: { customRender: 'thirdBehaviorStatus' } },
        { title: '成猫期', dataIndex: 'fourthBehaviorStatus', align: 'center', width: 70, scopedSlots: { customRender: 'fourthBehaviorStatus' } },
        { title: '老年猫', dataIndex: 'fifthBehaviorStatus', align: 'center', width: 70, scopedSlots: { customRender: 'fifthBehaviorStatus' } },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 160,
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],

    }
  },
  computed: {

  },
  watch: {

  },
  async created() {

  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.pageNum = 1
      this.getData()
    },
    upload(){
this.search()
    },
    delect(data) {
      this.$confirm({
        title: '删除',
        content: `请确认是否删除该条信息`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.loading = true
          behaviorDel({
            id: data.id
          })
            .then((res) => {
              this.$message.success('删除成功！')

              this.search()

              this.loading = false
            })
            .finally(() => (this.loading = false))

        },
      })
    },
    goCharts(data) {
      this.$refs.particulars.open()
    },
    getEdit(data){
      this.$refs.create.open(data)
    },
    getSearchParams() {
      console.log(this.vendorId);
      return {
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        startTime: this.$utils.getStartTime(this.createTime[0]),
        endTime: this.$utils.getEndTime(this.createTime[1])
      }
    },
    getData() {
      this.loading = true
      behaviorList(this.getSearchParams()).then(data => {
        this.total = data.total
        this.data = data.list
      }).finally(() => this.loading = false)
    },
    reset() {
      this.createTime = [undefined, undefined]
    }
  }
}
</script>
<style lang="less" scoped>
.ant-col {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .label {
    flex-shrink: 0;
    width: 86px;
    text-align: right;
    font-size: 14px;
    color: #595959;
  }

  .w-full {
    flex: 1;
  }
}
</style>
